<template>
  <div>
    <div :class="$style.container">
      <!-- IMUIKIT 相关内容 -->
      <div :class="$style.header">
        <div :class="$style.search" ref="search" />
        <div :class="$style.add" ref="add" />
      </div>
      <div :class="$style.content">
        <div :class="$style.left">
          <div :class="$style['avatar-icon']" ref="avatar" />
          <div :class="{ [$style['chat-icon']]: true, [$style.active]: model === 'chat' }"
               @click="() => model = 'chat'">
            <i :class="{ [$style['iconfont']]: true, 'iconfont': true, 'icon-message_fill_light': true }" />
            <div :class="$style['icon-label']">会话</div>
          </div>
          <div :class="{ [$style['contact-icon']]: true, [$style.active]: model === 'contact' }"
               @click="() => model = 'contact'">
            <i :class="{ [$style['iconfont']]: true, 'iconfont': true, 'icon-tongxunlu1': true }" />
            <div :class="$style['icon-label']">通讯录</div>
          </div>
          <div :class="$style['logout-icon']">
            <i :class="{ [$style['iconfont']]: true, 'iconfont': true, 'icon-logout': true }" />
            <div :class="$style['icon-label']">退出</div>
          </div>
        </div>
        <div :class="$style.right" v-show="model === 'chat'">
          <div :class="$style['right-list']" ref="conversation" />
          <div :class="$style['right-content']" ref="chat" />
        </div>
        <div :class="$style.right" v-show="model === 'contact'">
          <div :class="$style['right-list']" ref="contactList" />
          <div :class="$style['right-content']" ref="contactInfo" />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup name="IMApp" lang="ts">
import {
  ConversationContainer, // 会话列表组件
  ChatContainer, // 聊天（会话消息）组件
  AddContainer, // 搜索——添加按钮组件
  SearchContainer, // 搜索——搜索组件
  ContactListContainer, // 通讯录——通讯录导航组件
  ContactInfoContainer, // 通讯录——通讯录详情组件，包含好友列表、群组列表以及黑名单列表
  MyAvatarContainer // 用户资料组件
} from '@xkit-yx/im-kit-ui';
import '@xkit-yx/im-kit-ui/es/style/css';
import './iconfont.css';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { uikit } = proxy.$uikit;
const model = ref('chat');
const search = ref(null);
const add = ref(null);
const avatar = ref(null);
const conversation = ref(null);
const chat = ref(null);
const contactList = ref(null);
const contactInfo = ref(null);

onMounted(() => {
  //const uikit = proxy?.$uikit;
  console.log("**UIKIT**", uikit)
  if(uikit){
    //search
    uikit.render(
      SearchContainer,
      {
        onClickChat: () => {
          model.value = 'chat';
        }
      },
      search.value
    );
    //add
    uikit.render(
      AddContainer,
      {
        onClickChat: () => {
          model.value = 'chat';
        }
      },
      add.value
    );
    //avatar
    uikit.render(MyAvatarContainer, null, avatar.value);
    //conversation
    uikit.render(ConversationContainer, null, conversation.value);
    //chat
    uikit.render(
      ChatContainer,
      {
        onClickChat: () => {
          model.value = 'chat';
        }
      },
      chat.value
    );
    uikit.render(ContactListContainer, null, contactList.value);
    uikit.render(
      ContactInfoContainer,
      {
        afterSendMsgClick: () => {
          model.value = 'chat';
        },
        onGroupItemClick: () => {
          model.value = 'chat';
        }
      },
      contactInfo.value
    );
  }
});
</script>

<style module>
body {
  background: #d8dee5;
}
.container {
  width: 1070px;
  height: 670px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
}

.header {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #e8e8e8;
}

.search {
  width: 50%;
}

.add {
  margin-left: 20px;
}

.content {
  width: 100%;
  height: 610px;
  display: flex;
}

.left {
  width: 60px;
  border-right: 1px solid #e8e8e8;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.avatar-icon {
  margin: 20px 0 25px 0;
  border-radius: 50%;
  border: 1px solid #e8e8e8;
}

.iconfont {
  font-size: 24px;
}

.chat-icon,
.contact-icon {
  margin: 0 0 25px 0;
  font-size: 22px;
  color: rgba(0, 0, 0, 0.6);
  height: 45px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.active {
  color: #2a6bf2;
}

.logout-icon {
  position: absolute;
  bottom: 10px;
  font-size: 22px;
  color: rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.icon-label {
  font-size: 12px;
  text-align: center;
}

.right {
  flex: 1;
  display: flex;
}

.right-list {
  width: 200px;
  border-right: 1px solid #e8e8e8;
}

.right-content {
  flex: 1;
}
</style>
